﻿
@{
    Layout = null;
}

<table id="line" class="easyui-datagrid" style="width:100%;height:100%"
       url="/Data/GetLines"
       title="电线管理" iconcls="icon-save" fitcolumns="true" sortname="CreateTime" sortorder="desc"
       pagination="true"
       idfield="Id"
       fit="true"
       noheader="true"
       striped="true"
       singleselect="true"
       checkonselect="false"
       nowrap="true"
       loadmsg='正在加载……'
       rownumbers="true"
       frozencolumns="[[{ field:'ck'  checkbox:false }]]"
       toolbar="#tbLines">
    <thead>
        <tr>
            <th field="Id" width="10" align="center">标识</th>
            <th field="Name" width="100" align="center">名称</th>
            <th field="Color" width="100" align="center" formatter="getColor">颜色</th>
            <th field="PointIds" width="100" align="center">线杆编号</th>
            <th field="Content" width="100" align="center">端点</th>
            <th field="Remark" width="100" align="center">备注</th>
            <th field="CreateTime" width="100" align="center" formatter="formatTime">创建时间</th>
        </tr>
    </thead>
</table>
<div id="tbLines">
    <a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="javascript:AddLine()">添加</a>
    <a href="#" class="easyui-linkbutton" iconcls="icon-cut" plain="true" onclick="javascript:UpdateLine()">修改</a>
    <a href="#" class="easyui-linkbutton" iconcls="icon-cancel" plain="true" onclick="javascript:DeleteLine()">删除</a>
</div>

<div id="AddLine" class="easyui-dialog" title="添加电线" style="width:400px;height:400px;padding:10px" buttons="#lines-dlg-buttons" data-options="iconCls:'icon-add',resizable:true,modal:true,closed:true">
    <div class="easyui-panel" data-options="fit:true,border:false">
        <form id="addLineForm" method="post" action="/Data/AddLine">
            <input type="hidden" name="Id" id="line_Id" />

            <div style="margin-bottom:15px">
                <input class="easyui-textbox" name="Name" id="LineName" label="名称:" labelPosition="top" style="width:80%;">
            </div>

            <div style="margin-bottom:15px">
                <input class="easyui-textbox" name="PointIds" id="LinePointIds" label="线杆:(输入编号，英文半角逗号隔开)" labelPosition="top" style="width:80%;">
            </div>
           
            <div style="margin-bottom:15px">
                <input class="easyui-textbox" name="Remark" id="LineRemark" label="备注:" labelPosition="top" style="width:80%;">
            </div>
            <div style="margin-bottom:15px">
                <label>颜色</label>
                <input class="jscolor" name="Color" id="lineColor">
            </div>

        </form>
    </div>
</div>
<div id="lines-dlg-buttons">
    <table cellpadding="0" cellspacing="0" style="width:100%">
        <tr>
            <td>
                @*<img src="email.gif" />*@
            </td>
            <td style="text-align:right">
                <a href="#" class="easyui-linkbutton" iconcls="icon-save" onclick="javascript:SaveLine()">保存</a>
                <a href="#" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript: $('#AddLine').dialog('close')">取消</a>
            </td>
        </tr>
    </table>
</div>
<script src="~/Content/jscolor.min.js"></script>
<script type="text/javascript">


    function AddLine() {
        line_clear();
        $("#AddLine").dialog({ title: "添加电线" });
        $("#AddLine").dialog('open');
    }
    function getColor(value, index, row) {
        if (value) {
            return '<hr style="background-color:#' + value + '; width:80px; height:8px;">'
        }
    }
    function SaveLine() {
        $("#addLineForm").form('submit', {
            success: function (data) {
 
                if (data) {
                    $("#AddLine").dialog('close');
                    if ($("#line_Id").val() > 0)//ID存在
                    {
                        topCenter("修改电线", "修改成功!");
                    }
                    else {
                        topCenter("添加电线", "添加成功!");
                    }
                    $("#line").datagrid('reload');
                }
                else {
                    if ($("#line_Id").val() > 0)//ID存在
                    {
                        topCenter("修改电线", "修改失败!");
                    }
                    else {
                        topCenter("添加电线", "添加失败!");
                    }
                }

            }
        })
    }

    function UpdateLine() {
        line_clear();
        var row = $("#line").datagrid("getSelected");
        if (row == null) {
            topCenter("提示", "请选择要修改的数据!");
            return;
        }
        $("#line_Id").val(row.Id);
        $("#LineName").textbox('setValue', row.Name);
        $("#LinePointIds").textbox("setValue", row.PointIds);
        $("#LineRemark").textbox("setValue", row.Remark);
        $("#lineColor").val(row.Color)
        $("#AddLine").dialog({ title: "修改端点" });
        $("#AddLine").dialog('open');
    }

    function DeleteLine() {
        var row = $("#line").datagrid("getSelected");
        if (row == null) {
            topCenter("提示", "请选择要删除的数据!");
            return;
        }
        $.post('/Data/DeleteLine', { Id: row.Id }, function (data) {
            if (data) {
                topCenter("提示", "删除成功!");
                $("#line").datagrid('reload');
            } else {
                topCenter("提示", "删除失败!");
            }
        });
    }

    function line_clear() {
        $("#line_Id").val("");
        $("#LineName").textbox("setValue", "");
        $("#LinePointIds").textbox("setValue", "");
        $("#LineRemark").textbox("setValue", "");
        $("#lineColor").val("");
    }
</script>
